<template>
    <div v-if="isShow" class="searchCon">
        <v-search v-model="searchText" :isSearch.sync="isSearch" :title="title"></v-search>
        <v-scroll :on-refresh="onRefresh" :topFixed="top" :on-infinite="onInfinite" :top="top" :dataList="scrollData">
            <v-person :response='response'></v-person>
        </v-scroll>
    </div>
</template>

<script>
import Vue from 'vue'

import serachBox from "@/components/groupDept/serachBox"
import personView from "@/components/personal/tab1view";
import pullRefresh from "@/components/groupDept/components/index"
export default {
    name: "app",
    components: {
        'v-search': serachBox,
        "v-person": personView,
        'v-scroll': pullRefresh
    },
    data() {
        return {
            scrollData: {
                noFlag: false //暂无更多数据显示
            },
            response: [],
            top: '2rem',
            isEnd: false,
            cardPageSize: 20,
            cardPageNum: 1,
            searchNum: 1,
            title: null,
            searchText: null,
            isSearch:false,
        };
    },
    created() {
        this.response = this.responsePeoList;
    },
    props: {
        isShow: {
            type: Boolean,
            default: false
        },
        returnVal: {
            type: Object
        },
        responsePeoList:{
            type:Array,
            default:function(){
                return []
            }
        }
    },
    watch: {
        returnVal: function(newVal, oldVal) {
 
            this.scrollData.noFlag = false;
            this.title = newVal.descr;
            this.clearData();
            this.isSearch = false;
            this.initPeople();
        },
        searchText: function(newVal, oldVal) {
            this.clearData();
            this.searchText = newVal;
            this.searchPeo();
            
        },
        isSearch:function(newVal, oldVal){
            this.clearData();
            !newVal && (this.initPeople());
        },
        responsePeoList:function(newVal, oldVal){
            if (newVal && newVal.length>0) {
                this.response = newVal;
            }  
        }
    },
    computed: {

    },
    methods: {
        clearData: function() {
            this.searchNum = 1;
            this.isEnd = false;
            this.response = [];
            this.cardPageNum = 1;
        },
        // clearPersonData:function(){
        //     this.cardPageNum = 1;
        //     this.response = [];
        //     this.isEnd = false;
        // },
        searchPeo: function(type) {
            
            var params = {
                search: this.searchText,
                pageSize: this.cardPageSize,
                pageNum: this.searchNum,
            }
            this.postAjax(this.URL.getEmployeeByListSearch.url, params)
                .then(res => {
                    this.response = this.response.concat(res.data.datas.depempList || []);
                    var total = res.data.page ? res.data.page.total : res.data.total;
                    if (this.response.length === total) {
                        this.isEnd = true;
                    }
                });
        },
        postAjax: function(url, params) {
            return this.Axios
                .Post(url, params);

        },
        initPeople: function() {
            var params = {
                setid: this.returnVal.setid || "",
                deplid: this.returnVal.deptid || "",
                pageSize: this.cardPageSize,
                pageNum: this.cardPageNum
            };
            this.postAjax(this.URL.getEmployeeByList.url, params)
                .then(res => {
                    var resList = res.data.datas ? res.data.datas.depempList : [];
                    this.response = this.response.concat(resList);
                    var total = res.data.page ? res.data.page.total : res.data.total;
                    if (this.response.length === total) {
                        this.isEnd = true;
                    }
                    if (this.response.length === 0) {
                        this.isLoadMore();
                    }
                });
        },
        //下拉刷新
        onRefresh(done) {
            this.clearData();
            this.isSearch ? this.searchPeo() : this.initPeople();
            done(); // call done
        },
        onInfinite(done) {
            if (this.isEnd) {
                this.isLoadMore();
                done();
                return;
            }
            this.isSearch ? this.searchNum ++ : this.cardPageNum ++;
            this.isSearch ? this.searchPeo() : this.initPeople();
            // this.searchPeo('loadmore');
            this.isLoadMore();
            done();
        },
        isLoadMore: function() {
            let more = this.$el.querySelector('.load-more');
            if (this.isEnd) {
                more.style.display = 'none'; //隐藏加载条
                //走完数据调用方法
                this.scrollData.noFlag = true;
            } else {
                more.style.display = 'none'; //隐藏加载条
            }
        },

    }
};
</script>

<style scoped="scoped" lang="less">
.searchCon{
    position: relative;
    margin-top:0.1rem;
}
</style>



